<template>
  <view class="order-detail flexc">
    <u-navbar
      title="订单详情"
      :fixed="true"
      :placeholder="true"
      bgColor="#ffffff"
      :autoBack="false"
      leftIconColor="#000000"
      @leftClick="leftClick()"></u-navbar>
    <view class="flex over">
      <view class="page-ctx">
        <view class="box-item box-status flex-between">
          <view class="info-box">
            <view class="title">
              <text>{{ statusInfo }}</text>
            </view>
            <view class="tip">
              <view
                class="tip-item"
                v-if="statusInfo == '等待买家付款' && pay_end_time > 0">
                订单将于
                <u-count-down
                  :time="pay_end_time"
                  format="HH 小时 mm 分 ss 秒"></u-count-down>
                后自动关闭
              </view>
              <view
                class="tip-item"
                v-if="statusInfo == '待收货' && receive_end_time > 0">
                订单将于
                <u-count-down
                  :time="receive_end_time"
                  format="DD 天 HH 小时 mm 分 ss 秒"></u-count-down>
                后自动关闭
              </view>
              <view class="tip-item" v-if="statusInfo == '待核销'">
                请在预约日期进行核销
              </view>
            </view>
          </view>
          <view class="icon-box">
            <image
              v-if="statusInfo == '待支付'"
              src="@/static/order/status-unpay.png"
              mode=""></image>
            <image
              v-if="statusInfo == '无效'"
              src="@/static/order/status-cancel.png"
              mode=""></image>
            <image
              v-if="statusInfo == '订单已取消'"
              src="@/static/order/status-cancel.png"
              mode=""></image>
            <image
              v-if="statusInfo == '待发货'"
              src="@/static/order/status-unship.png"
              mode=""></image>
            <image
              v-if="statusInfo == '待收货'"
              src="@/static/order/status-unreceive.png"
              mode=""></image>
            <image
              v-if="statusInfo == '待评价' && info.ifComment != 1"
              src="@/static/order/status-unreview.png"
              mode=""></image>
            <image
              v-if="
                statusInfo == '已完成' ||
                (info.orderStatus == 4 && info.ifComment == 1)
              "
              src="@/static/order/status-used.png"
              mode=""></image>
          </view>
        </view>

        <view class="box-item box-info">
          <view class="m-box">
            门店联系：
            <text>xxx商店</text>
            <text>1311111</text>
          </view>
          <view class="m-box" style="margin-top: 22upx">
            门店地址：被近视湿哒哒萨达的
          </view>
        </view>

        <view class="box-item box-info">
          <view class="info-title">商品详情</view>
          <view class="products-wrap">
            <view class="product-list">
              <view
                class="product-item flex"
                v-for="(product_item, index) in products"
                :key="index"
                @click="toProduct(product_item)">
                <view class="poster-box">
                  <image :src="product_item.image" mode="aspectFill"></image>
                </view>
                <view class="info">
                  <view class="title-box">
                    <view class="title ellipsis-2">
                      {{ product_item.title }}
                    </view>
                  </view>
                  <view class="desc-box">
                    <view class="desc ellipsis-1">
                      {{ product_item.keyVals }}
                    </view>
                  </view>
                  <view class="price-box flex-between">
                    <view class="price-info">
                      {{ product_item.priceSale || 0 }}积分
                    </view>
                    <text class="num">x {{ product_item.num }}</text>
                  </view>

                  <!--    <view
                  class="product-reviews-box"
                  v-if="info.orderStatus == 5 && product_item.ifComment == 0">
                  <view class="btns">
                    <view
                      class="btn fit-text btn-reviews"
                      @click.stop="toReview(product_item)">
                      写评价
                    </view>
                  </view>
                </view> -->
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="box-item box-price">
          <div class="mingxi-title">价格明细</div>

          <view class="mingxi-list">
            <view class="mingxi-item flex-between">
              <view class="label">商品总价</view>
              <view class="num">共{{ total_product_number }}件商品</view>
              <view class="value">{{ payInfo.goods || 0 }}积分</view>
            </view>

            <!-- <view class="mingxi-item flex-between">
						<view class="label">
							积分抵扣
						</view>
						<view class="num"> -->
            <!-- 10积分减1元 -->
            <!-- </view>
						<view class="value">
							-￥{{order_points_dixian_price || 0}}
						</view>
					</view> -->
          </view>

          <view class="total-info flex-between">
            <view class="label">合计应付</view>
            <view class="value">{{ info.pricePayed }}积分</view>
          </view>
        </view>

        <view class="box-item box-pay" v-if="is_finish_pay || is_xianxia">
          <view class="pay-info flex-between">
            <text class="label">支付方式：</text>
            <view class="pay-right">
              <text class="value flex">
                <image src="@/static/image/j.png" mode="aspectFit"></image>
                <text>积分支付</text>
              </text>
            </view>
          </view>

          <!--   <view class="box-xianxia" v-if="is_xianxia">
          <view class="info-box">
            <div class="box-title">收款对公账户</div>
            <view class="box-loop-wrap">
              

              <view class="box-loop" v-for="(item, index) in offlineJson">
                <view class="box-info">
                  <view class="label">公司全称</view>
                  <view class="value" @click="doCopyAccountInfo(item.company)">
                    {{ item.company }}
                    <image src="@/static/common/copy.png" mode=""></image>
                  </view>
                </view>
                <view class="box-info">
                  <view class="label">对公开户行</view>
                  <view class="value" @click="doCopyAccountInfo(item.bankName)">
                    {{ item.bankName }}
                    <image src="@/static/common/copy.png" mode=""></image>
                  </view>
                </view>
                <view class="box-info">
                  <view class="label">对公账户</view>
                  <view
                    class="value"
                    @click="doCopyAccountInfo(item.bankAccount)">
                    {{ item.bankAccount }}
                    <image src="@/static/common/copy.png" mode=""></image>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view class="info-box upload-wrap">
            <div class="box-title">转账凭证</div>
            <view class="upload-box">
              <view class="upload-list">
                <view
                  class="upload-item"
                  v-for="(pic, index) in uploadImages"
                  :key="index"
                  @click="doPreview(pic)">
                  <view class="poster-box">
                    <image
                      class="upload-image"
                      :src="pic"
                      mode="aspectFill"></image>
                  </view>
                </view>

               
              </view>
            </view>
          </view>
        </view> -->
        </view>

        <view class="box-item box-info">
          <view class="info-title">订单信息</view>
          <view class="order-content">
            <view class="item">
              <text class="label">订单编号：</text>
              <text class="value">{{ info.orderNo }}</text>
            </view>
            <view class="item">
              <text class="label">下单时间：</text>
              <text class="value">{{ info.createdTime }}</text>
            </view>
            <view class="item">
              <text class="label">配送方式：</text>
              <text class="value">自提</text>
            </view>
            <view class="item">
              <text class="label">订单备注：</text>
              <text class="value">{{ info.remark }}</text>
            </view>
          </view>
        </view>

        <view class="box-item box-info" v-if="fahuoInfo.id">
          <view class="info-title">物流信息</view>
          <view class="order-content">
            <view class="item">
              <text class="label">物流单号：</text>
              <text class="value">{{ fahuoInfo.expressOrder }}</text>
            </view>
            <view class="item">
              <text class="label">承运物流：</text>
              <text class="value">{{ fahuoInfo.expressName }}</text>
            </view>

            <view class="item" v-if="express">
              <text class="label">物流进度：</text>
              <text class="value"></text>
            </view>

            <view class="express-info" v-if="express">
              <view
                class="express-content"
                v-if="express.Traces && express.Traces.length > 0">
                <u-steps
                  activeColor="#84C547"
                  :current="express.length"
                  direction="column"
                  dot>
                  <u-steps-item
                    :title="item.AcceptStation"
                    :desc="item.AcceptTime"
                    v-for="(item, index) in express.Traces"
                    :key="index"></u-steps-item>
                </u-steps>
              </view>
              <view class="express-reason" v-if="express.Reason">
                <text class="">{{ express.Reason || "" }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      class="page-foot"
      v-if="
        info.ifCancel == 1 ||
        info.ifPay == 1 ||
        info.ifDel == 1 ||
        info.ifReceive == 1
      ">
      <view class="safe-fixed-bottom">
        <view class="btns flex-between">
          <view
            v-if="info.ifCancel == 1"
            class="btn flex-center btn-cancel"
            @click="doCancel()">
            取消订单
          </view>
          <view v-if="info.ifCancel == 1" class="btn flex-center btn-cancel">
            <!-- @click.stop="toReview(product_item)" -->
            去评论
          </view>

          <view
            v-if="info.ifPay == 1"
            class="btn flex-center btn-pay"
            @click="doPay()">
            去支付
          </view>
          <view
            v-if="info.ifDel == 1"
            class="btn fit-text btn-delete"
            @click="doDelete()">
            删除订单
          </view>
          <view
            v-if="info.ifReceive == 1"
            class="btn fit-text btn-pay"
            @click="doReceive()">
            确认收货
          </view>
        </view>
      </view>
    </view>

    <order_payment_methods_pop
      data-title="订单支付"
      ref="order_payment_methods_pop"
      @confirm="update_order_info" />
    <order_cancel_pop
      data-title="订单取消"
      ref="order_cancel_pop"
      @confirm="update_order_info" />
    <order_delete_pop
      data-title="订单删除"
      ref="order_delete_pop"
      @confirm="confrimDelete" />
    <order_receive_pop
      data-title="订单确认收货"
      ref="order_receive_pop"
      @confirm="update_order_info" />
    <view class="q-pop" v-if="show">
      <u-popup
        :show="true"
        :overlay="true"
        mode="center"
        :closeable="false"
        :closeOnClickOverlay="false"
        round="16">
        <view class="q-pop-box column-flex-center">
          <view class="q-t">核销码</view>
          <view class="q-pop-body column-flex-center">
            <image src="@/static/image/upload.png" mode="aspectFit"></image>
            <view class="">核销码：1201</view>
          </view>
          <view class="q-c" @click="show = false">
            <image src="@/static/image/cc.png" mode="aspectFit"></image>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import order_payment_methods_pop from "@/components/order/order_payment_methods_pop.vue";
import order_cancel_pop from "@/components/order/order_cancel_pop.vue";
import order_delete_pop from "@/components/order/order_delete_pop.vue";
import order_receive_pop from "@/components/order/order_receive_pop.vue";

export default {
  components: {
    order_payment_methods_pop,
    order_cancel_pop,
    order_delete_pop,
    order_receive_pop,
  },
  data() {
    return {
      show: true,
      is_test_hexiao: true, // 测试被核销
      //
      from: "",
      id: "",
      order_id: "",
      info: {
        ifPay: 1,
        ifCancel: 1,
      },
      statusInfo: "",
      payInfo: {},
      shouhuoInfo: {
        name: "",
        phone: "",
        address: "",
      }, //收货人信息
      fahuoInfo: {}, //发货信息
      offlineJson: [],
      total_product_number: 0,
      products: [],
      full_receive_address: "",
      //
      order_yunfei: "",

      //
      order_zhekou_bili: 10, //打几折
      order_zhekou_price: 0,
      //
      order_points_dixian_price: 0, //积分抵现金额
      order_points_dixian_number: 0, //使用积分数量

      //
      express: "",
      index_config: [],
      xindanshijian: "",
      xindanshijian1: "",
      expressInfo: [
        {
          name: "下单",
        },
        {
          name: "出库",
        },
        {
          name: "运输",
        },
        {
          name: "签收",
        },
      ],

      //
      statusEn: "", // unpay
      statusEnMap: {
        "-5": "unpay",
        "-5_2": "invalid",
        "-1": "canceled",
        2: "unship",
        3: "unreceive",
        4: "unreview",
        5: "finish",
      },

      //
      headBackground: "", //控制顶部标题栏颜色 默认透明颜色 transparent
      statusBackgroundMap: {
        1: "#F64A48",
        2: "#4EC2FF",
        3: "#EEEEEE",
        "-1": "#EEEEEE",
      },
      //
      pageTitleColor: "#000000",
      statusTitleColorMap: {
        1: "#ffffff",
        2: "#ffffff",
        3: "#000000",
        "-1": "#000000",
      },

      //结果类状态
      is_finish_pay: false, //是否已被支付
      is_xianxia: false, //是否线下支付
      //
      pay_end_time: 0, //支付倒计时
      receive_end_time: "", //确认收货倒计时

      // 线下支付
      uploadImages: [], //线下凭证上传
      allow_upload_number: 1, //最大上传数量限制
      xianxia_account_list: [],
      xianxia_account_select: {},
    };
  },

  computed: {
    total_price() {
      let total = this.main_seat_total_price + this.common_seat_total_price;
      total = parseFloat(total).toFixed(2);
      return parseFloat(total);
    },
  },

  onLoad(option) {
    this.from = option.from || ""; // payment 支付结果
    this.id = option.id;
    this.order_id = option.id;
  },
  onShow() {
    this.setView();
  },
  onHide() {},
  onPullDownRefresh() {},
  onPageScroll(e) {
    if (e.scrollTop > 80) {
      this.headBackground = this.statusBackgroundMap[this.info.status];
    } else {
      this.headBackground = "";
    }
  },
  methods: {
    leftClick() {
      console.log("leftClick");
      if (this.from == "payment") {
        this.toRoute("/my");
      } else {
        this.toBack();
      }
    },

    setView() {
      this.showLoading({
        title: "订单信息查询中",
      });
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_detail",
          id: this.id,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;

          this.info = data;
          this.statusInfo = data.statusInfo || "";
          let { payInfo, products, shouhuoInfo, fahuoInfo, offlineJson } = data;

          this.order_points_dixian_price = payInfo.jifen;
          //金额信息
          this.payInfo = payInfo;

          //商品
          this.products = products;
          this.products.forEach((v) => {
            this.total_product_number += parseInt(v.num);
          });

          //线下支付
          this.offlineJson = offlineJson || [];
          this.is_xianxia = this.offlineJson.length > 0;
          if (this.is_xianxia) {
            this.uploadImages = offlineJson[0].images.split(",");
          }
          //收货信息
          this.shouhuoInfo = shouhuoInfo;
          if (shouhuoInfo) {
            let { country, province, city, area, address } = shouhuoInfo;
            this.full_receive_address = [country, province, city, area, address]
              .filter((v) => v)
              .join(" ");
          }

          //发货信息
          this.fahuoInfo = fahuoInfo;
          this.is_finish_pay = parseFloat(data.pricePayed) > 0;
          //

          // 订单状态
          let orderStatus = data.orderStatus;
          this.statusEn = this.statusEnMap[orderStatus];
          this.pageTitleColor = this.statusTitleColorMap[orderStatus];

          //
          //this.pay_end_time = (data.pay_end_time || 0) * 1000
          this.get_config(); //获取付款倒计时
          if (data.orderStatus >= 3) {
            //待收货 3
            this.express_getInfo(this.fahuoInfo.id);
          }
        }

        // this.hideLoading()
      });
    },
    get_config() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "index_config",
        },
      }).then((res) => {
        let index_config = res.data;
        //确认收货倒计时时间
        if (this.info.fahuoInfo) {
          this.receive_end_time =
            new Date(this.info.fahuoInfo.fahuoTime).getTime() +
            index_config.timeShouhuo * 24 * 60 * 60 * 1000 -
            new Date().getTime();
        }
        //待付款自动关闭时间
        this.pay_end_time =
          new Date(this.info.createdTime).getTime() +
          index_config.timePay * 60 * 1000 -
          new Date().getTime();
      });
    },

    //快递物流信息
    express_getInfo(fahuo_id) {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "express_getInfo",
          fahuo_id: fahuo_id,
        },
      }).then((res) => {
        this.express = res.data;
      });
    },

    doPay() {
      this.$refs.order_payment_methods_pop.init(this.info);
    },

    doCancel() {
      this.$refs.order_cancel_pop.init(this.info);
    },

    doDelete() {
      this.$refs.order_delete_pop.init(this.info);
    },

    doReceive() {
      // this.$refs.order_receive_pop.init(this.info)

      let item = this.info;
      // #ifdef MP-WEIXIN

      this.mix_throttle(this.weixin_receive);
      // #endif
      // #ifndef MP-WEIXIN
      this.other_receive(item);
      // #endif
    },

    //微信收货
    weixin_receive() {
      let item = this.info;
      console.log("确认收货 weixin_receive");
      console.log("确认收货 wx.openBusinessView", wx.openBusinessView);
      //拉起确认收货组件
      if (wx.openBusinessView) {
        let transaction_id = "";
        if (item.shouhuoLishui && item.shouhuoLishui.length) {
          transaction_id = item.shouhuoLishui[0].transactionId || "";
        }
        console.log("确认收货 transaction_id", transaction_id);

        wx.openBusinessView({
          businessType: "weappOrderConfirm",
          extraData: {
            merchant_id: "", //'1230000109',用户交易商户号
            merchant_trade_no: "", //'1234323JKHDFE1243252',商户订单号
            transaction_id: transaction_id, //'420123123123123123123' 	用户交易单号
          },
          success: (params) => {
            console.log("success params", params);
            //dosomething
            // let demo_params = {
            // 	errCode: 0,
            // 	errMsg: "openBusinessView:ok",
            // 	extraData: {
            // 		status: 'success',//"success":用户确认收货成功;"fail":用户确认收货失败;"cancel":用户取消
            // 		errormsg: '',
            // 		req_extradata: {

            // 		}
            // 	},
            // }
            if (
              params &&
              params.extraData &&
              params.extraData.status == "success"
            ) {
              this.do_confirm_receive(item);
            }
          },
          fail: (params) => {
            console.log("fail params", params);
            //dosomething
            this.$alert(params.errMsg);
          },
          complete: (params) => {
            console.log("complete params", params);
            //dosomething
          },
        });
      } else {
        //引导用户升级微信版本
      }
    },
    //其他收货
    other_receive(item) {
      this.$refs.order_receive_pop.init(item);
    },
    //
    do_confirm_receive(item) {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_shouhuo",
          id: item.id,
        },
      }).then((res) => {
        this.$alert(res);
        if (res.code == 200) {
          this.update_order_info();
        }
      });
    },
    //

    //确认取消订单
    confrimDelete() {
      this.toBack({
        time: 1500,
      });
    },

    toReview(item) {
      this.toRoute({
        path: "/order-review-submit",
        query: {
          orderId: this.order_id,
          inventoryId: item.id,
        },
      });
    },

    toProduct(item) {
      this.toRoute({
        path: "/product-detail",
        query: {
          id: item.id,
        },
      });
    },

    update_order_info() {
      this.setView();
    },

    //线下 预览凭证
    doPreview(pic) {
      uni.previewImage({
        urls: [pic],
      });
    },
    //线下-复制转账信息
    doCopyAccountInfo(data) {
      uni.setClipboardData({
        data: `${data}`,
        success: () => {
          console.log("复制");
          this.$alert("已复制");
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-detail {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
}
.page-ctx {
  padding: 24rpx 32rpx;
  background: #f6f6f6;
  width: 100%;
  box-sizing: border-box;
}

.box-item {
  margin-bottom: 24rpx;
  padding: 32rpx 24rpx;
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 24rpx 24rpx 24rpx 24rpx;
}

.box-status {
  .info-box {
    flex: 1;
    overflow: hidden;

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }

    .tip {
      margin-top: 12rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #b3b9c9;

      .tip-item {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #b3b9c9;
        display: flex;
        align-items: center;

        /deep/.u-count-down__text {
          font-size: 20rpx;
          color: #b3b9c9;
        }
      }
    }
  }

  .icon-box {
    width: 72rpx;
    height: 72rpx;

    image {
      width: 72rpx;
      height: 72rpx;
    }
  }
}

.products-wrap {
  padding: 0 0;

  .product-list {
    .product-item {
      padding: 32rpx 0;
      align-items: flex-start;

      & + .product-item {
        border-top: 1rpx solid #eee;
      }

      .poster-box {
        width: 176rpx;
        height: 176rpx;
        border-radius: 8rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        flex: 1;
        overflow: hidden;
        padding-left: 24rpx;

        .title-box {
        }

        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
        }

        .desc-box {
          margin-top: 14rpx;

          .desc {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #000;
          }
        }

        .price-box {
          margin-top: 18rpx;

          .price-info {
            font-weight: bold;
            font-size: 28rpx;
            color: #e23410;
          }

          .num {
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }
      }
    }
  }
}

// 产品评价
.product-reviews-box {
  margin-top: 24rpx;
  display: flex;
  justify-content: flex-end;

  .btns {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    flex-wrap: wrap;

    .btn {
      margin-left: 20rpx;
      min-width: 136rpx;
      height: 48rpx;
      background: #f4f4f4;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;

      &.btn-reviews {
        background: #cb0011;
        color: #ffffff;
      }
    }
  }
}

.cell-item {
  height: 108rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  & + .cell-item {
    border-top: 1rpx solid #eaeaea;
  }

  .label {
    padding-right: 24rpx;
    flex: 1;
    overflow: hidden;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;

    image {
      margin-right: 10rpx;
      width: 48rpx;
      height: 48rpx;
      border-radius: 8rpx;
    }

    text {
      flex: 1;
      overflow: hidden;
    }
  }

  .value-box {
    width: fit-content;

    .value {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #7d7d7d;

      &.right-padding {
        margin-right: 10rpx;
      }
    }

    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.box-price {
  margin-top: 24rpx;

  .mingxi-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
  }

  .mingxi-list {
  }

  .mingxi-item {
    margin-top: 20rpx;

    .label {
      width: 160rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #222222;
    }

    .num {
      flex: 1;
      text-align: left;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }

    .value {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #222222;
    }
  }

  .total-info {
    border-top: 1rpx solid #f8f8f8;
    margin-top: 32rpx;
    padding-top: 32rpx;

    .label {
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
    }

    .value {
      font-weight: bold;
      font-size: 32rpx;
      color: #222222;
    }
  }
}

.box-pay {
  padding: 24rpx 24rpx;

  .pay-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .label {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #222222;
    }

    .value {
      image {
        margin-right: 24rpx;
        width: 40rpx;
        height: 40rpx;
      }

      text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }
    }
  }
}

.box-info {
  .m-box {
    font-weight: bold;
    font-size: 24rpx;
    color: #000000;
    & > text {
      font-weight: 400;
    }
  }
  .info-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
  }

  .order-content {
    margin-top: 20rpx;

    .item {
      display: flex;

      & + .item {
        margin-top: 22rpx;
      }

      .label {
        display: inline-block;
        min-width: 5em;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #222222;
      }

      .value {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
      }
    }
  }
}

// 快递信息
.express-reason {
  margin-top: 10rpx;
  font-size: 24rpx;
}

// 线下支付
.box-xianxia {
  padding: 10rpx 0rpx;
  margin-top: 0rpx;

  .info-box {
    .box-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
    }

    .box-loop {
      & + .box-loop {
        margin-top: 20rpx;
        border-top: 1rpx solid #eee;
      }
    }

    .box-info {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
      }

      .value {
        display: inline-flex;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;

        image {
          margin-left: 16rpx;
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }

  .upload-wrap {
    margin-top: 32rpx;

    .upload-box {
      margin-top: 24rpx;

      image {
      }
    }
  }
}

.upload-wrap {
  margin-top: 32rpx;

  .upload-box {
    margin-top: 24rpx;

    image {
    }
  }
}

// 线下转账凭证
.upload-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .upload-item {
    margin-bottom: 24rpx;
    margin-right: 16rpx;
    position: relative;
    width: 202rpx;
    height: 198rpx;
    background: #f6fafd;
    background: #fff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;

    &:nth-child(3n) {
      margin-right: 0;
    }

    .upload-icon {
      width: 100%;
      height: 100%;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    .poster-box {
      width: 100%;
      height: 100%;

      .upload-image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }
    }

    .remore-box {
      position: absolute;
      z-index: 10;
      right: -20rpx;
      top: -20rpx;
      width: 60rpx;
      height: 60rpx;

      .upload-remove {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}

.page-foot {
  .btns {
    width: 100%;

    .btn {
      flex: 1;
      // width: 345rpx;
      height: 80rpx;
      border-radius: 58rpx 58rpx 58rpx 58rpx;
      border: 2rpx solid #eff1f6;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 28rpx;
      background: #f6f6f6;
      color: #666666;

      & + .btn {
        margin-left: 24rpx;
      }

      &.btn-pay {
        background: #f49c0d;
        color: #ffffff;
      }

      &.btn-cancel {
      }

      &.btn-refund {
      }

      &.btn-disabled {
      }

      &[disabled] {
      }
    }
  }
}
.q-pop {
  &-box {
    width: 542rpx;

    background: #ffffff;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    position: relative;
    .q-t {
      margin-top: 58upx;
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      margin-bottom: 42upx;
    }
    .q-pop-body {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      & > image {
        width: 280rpx;
        height: 280rpx;
        margin-bottom: 30upx;
      }
    }
    .q-c {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 630upx;
      width: 64rpx;
      height: 64rpx;
      border-radius: 54rpx 54rpx 54rpx 54rpx;
      & > image {
        width: 64rpx;
        height: 64rpx;
      }
    }
  }
}
</style>
